import React, { Component } from 'react'
import Tabbar from '../Common/Tabbar'
import Header from '../Common/Header'
import { connect } from 'react-redux';
import {scclick_action, cancel_action} from '../../store/store'
class Sysp extends Component {
    constructor(){
        super();
        this.state = {
           oIndex:0,//定义一个初始下标
        };
    }

    //当点击时修改初始下标值
    click=(index)=>{
        this.setState({
            oIndex:index,
        })
    }

    //阻止默认点击
    zz=(e)=>{
        e.stopPropagation()
    }
    render() {
        return (
            <div className="sysp">
                {/* 头部导航 */}
                <Header title="所有商品"></Header>
                {/* 主体 */}
                <div className="content">
                    {/* 左侧导航 */}
                    <div className="left">
                        {/* 渲染左侧导航 */}
                        {
                        this.props.list.map((item,index)=>{
                            return (
                                <div className={this.state.oIndex===index?"item acte":'item'} key={index} onClick={()=>{this.click(index)
                                }}>
                                     {item.title}
                                </div>
                            )
                        })
                        }
                    </div>
                    {/* 右侧列表 */}
                    <div className="right">
                        {/* 渲染对应数据 */}
                            {
                                  this.props.list[this.state.oIndex].children.map((item,index)=>{
                            return (
                                /* 点击跳转详情页，并把点击项传递 */
                                    <div className="item" key={index} onClick={()=>{
                                        this.props.history.push({
                                            pathname:'/detail',
                                            state:item
                                        });
                                    }}>
                                <div className="img">
                                  <img src={item.pic} alt=""/>
                                </div>
                                <div className="text">
                                    <div className="title">{item.title}</div>
                                     <div className="ks">￥:{item.ks}</div>
                                    <div className="ks">用户:{item.iphone}</div>
                                </div>
                                <div className="btn">
                                    {/* 查找收藏列表 */}
                                    {/* 当前项？"取消收藏":"收藏" */}
                                    {/* 点击取消收藏从收藏列表删除该项----点击删除添加该项到收藏列表--并阻止点击冒泡事件 */}
                                    {
                                    this.props.sclist.find(ite=>ite.id===item.id)
                                    ?<span className="sc" onClick={(e)=>{this.props.cancel(item.id);this.zz(e)}}>取消收藏</span>
                                    :<span className="sc" onClick={(e)=>{this.props.scclick(item);this.zz(e)}}>收藏</span>
                                    }
                                   <span className="cyjp"onClick={(e)=>{this.zz(e)}}>参与竞拍</span>
                                </div>
                            </div>
                            )
                        })    
                            }
                    </div>
                </div>
                <Tabbar></Tabbar>
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return{
            /* 获取store中的list和sclist */
            list:state.list.list,
            sclist:state.sclist
        }
    },
    (dispatch)=>{
        return{
            /* 点击收藏和取消收藏action */
            scclick:(item)=>{
                dispatch(scclick_action(item))
            },
            cancel:(id)=>{
                dispatch(cancel_action(id))
            }
        }
    }
)(Sysp)